0

私はプログラミングの課題を抱えており、それに取り組むための最もバグのない方法は何だろうと思っています。

基本的に、次の HMTL があります。

<p id="first">
    Hello lorem ispum 
    <a id="link" href="...">Link</a> 
    linkety link blag
</p>

(ID は、getElementById による取得の概念実証用です。実際には、ページを要素ごとに解析する DOM 参照を取得します)。

"Hello lorem ispum" と "linkety link blag" のテキスト フラグメントが孤立しており、直接アクセスできません。段落タグまたは内側の「a」タグを使用してのみ、全体にアクセスできます。

私が望むのは、段落内のものの要素の配列です。JavaScript で変更するための参照を取得するためにラッピング タグなどを取得する必要がある場合は、それで問題ありません。EG、最終結果:

para[0] = <span>Hello lorem ispum</span>
para[1] = <a id="link" href="...">Link</a>
para[2] = <span>linkety link blag</span>

ページ上の内容にリンクして変更/アクセスできる DOM オブジェクト (文字列ではありません)。

段落タグの innerHTML を解析するだけでしょうか?

これはすべて、上下の矢印キーを使用するだけでテキストを読むことができないオープン ソースの Chrome プラグインです。この問題に対処する方法について何か良いアイデアがあれば、お知らせください。

4

4 に答える 4

1

これを試してみてください。テキストノードのコンテンツでスパンを作成し、それをテキストノードに置き換えます

var p = document.getElementById('first');    
var elements = [];    
for (var i = 0; i < p.childNodes.length; i++) {
    var child = p.childNodes[i];
    if (child.nodeType == 3) {//text node
        if (! /^\s+$/.test(child.nodeValue)){//skip whitespaces
            var span = document.createElement('span');
            span.innerHTML = child.nodeValue;
            p.replaceChild(span, child);
            elements.push(span);
        }
    }
    else if (child.nodeType == 1){//element node
        elements.push(child)
    }
}

http://jsfiddle.net/mowglisanu/t6UaJ/

于 2012-11-30T22:39:39.283 に答える
1 
var paragraph = document.getElementById('first'),
    list = paragraph.childNodes,
    l = list.length,
    el, container, i = 0, result = [];

for(i; i < l; i++) {
    el = list[i];
    if (el.nodeType === 3) {
        container = document.createElement('span');
        container.className = 'wrapper';
        // we want to remove line breaks from the text
        container.innerText = el.nodeValue.replace(/(\r\n|\n|\r)/gm,"");
        el = container;
    }
    result.push(el);
}

JSFiddle

テキストノードから改行を削除したい理由は、改行が に変換される<br>ため<span>です。これが必要なものだとは思わないでください。

あなたの特定のケースでresultは、次のようになります。

[スパン、リンク、スパン]

于 2012-11-30T22:02:56.270 に答える
1

を繰り返すことができますchildNodes

   var para = document.getElementById('first');

var arr = [];

for (var i = 0; i < para.childNodes.length; i++) {
    var elem = para.childNodes[i];
    if (elem.nodeType === 3) {
        var newElem = document.createElement('span');
        newElem.className = 'a';
        newElem.innerHTML = trim(elem.nodeValue);
        elem.parentNode.insertBefore(newElem, elem.nextSibling);
        para.removeChild(elem);
        arr.push(newElem);
    }
    else {
        arr.push(elem)
    }

}
console.log(arr);

function trim(str) {
    return str.replace(/^\s+|\s+$/g, "");
}​

フィドルをチェック

于 2012-11-30T22:05:16.563 に答える
0

<p>次のように、タグの子ノードをたどり、nodeType を調べて、どのノードがテキスト ノードであるかを確認することにより、他の要素にないテキスト ノードからテキストを取得できます。

var top = document.getElementById("first");
var node = top.firstChild;
while (node) {
    // get text from text nodes that aren't contained in elements
    if (node.nodeType === 3) {
        // node.nodeValue is the text in the text node
    } else if (node.nodeType === 1) {
        // node is an element here so you can get innerHTML or textContent or whatever you want
    }
    node = node.nextSibling;
}

実際のデモ: http://jsfiddle.net/jfriend00/YvBpw/

タグ全体 (すべての要素を含む) からのプレーン テキストだけが必要<p>で、クロス ブラウザーで実行する場合は、次のように使用できます。

var t = document.getElementById("first");
var text = t.textContent || t.innerText;

<p>これは、タグ内のすべての HTML を取り除いたテキスト変換になります。

于 2012-11-30T22:02:58.060 に答える