1

一致した単語を黄色のbg-colorのアンカーにフォーマットする蛍光ペン関数があり、次の検索のためにアンカー要素を削除する関数が必要です。

一致した単語のマークアップは、最初の単語は次のようになります。

<a id="searchword1" class="searchword" style="background-color: yellow; text-decoration: none; color: black;">my text</a>

アンカーを削除する必要がありますが、テキストはそのままにしておきます。私の文書には、干渉したくない他のアンカーがあります。これは純粋なJavascript（jQueryなし）で行う必要があります。

  • 追加要件：タグを削除した後に新しい行を作成せず、そのままにしておきます。

enhzflepのおかげで、これまでのコードは次のようになりました。

for (z=0;z<szam;z++){
    var removal = parent.frames['pagina'].document.getElementById("searchword"+z);
    var highlightedText = removal.innerHTML.toLowerCase;
    removeh(removal,highlightedText,doc);
    }


function removeh(node,high,doc) {
doc = typeof(doc) != 'undefined' ? doc : document;
    if (node.hasChildNodes) {
        var hi_cn;
        for (hi_cn=0;hi_cn<node.childNodes.length;hi_cn++) {
            removeh(node.childNodes[hi_cn],high,doc);           
        }
    }
        //1. Get element containing text
    if (node.nodeType == 3) {
    tempnode = node.nodeValue.toLowerCase();
    if (tempnode.indexOf(high) != -1) {
    nv = node.nodeValue;
    nv = node.nodeValue;
    ni = tempnode.indexOf(high);
        //2. Get the text it contains
    before = doc.createTextNode(nv.substr(0,ni));
    dochighVal = nv.substr(ni,high.length);
    after = doc.createTextNode(nv.substr(ni+high.length));
        //3. Get the highlighted element's parent
    var daddy = node.parentNode;
        //4. Create a text node:
    var newNode = document.createTextNode(dochighVal);
        //5. Insert it into the document before the link
    daddy.insertBefore(before, node);
    daddy.insertBefore(newNode, node);
    daddy.insertBefore(after, node);
        //6. Remove the link element
    daddy.removeChild(node);
    }
    }
}

ここで、numは一致した単語の数です。

どういうわけかこれはうまくいきません、助けてください、私はこの小さな問題も解決する答えを受け入れます。

2つの答えは正しい方法でしたが、結果のテキストを新しい行で区切るため、まだバグがあります。これにより、蛍光ペン関数が「my word」を個別の一時ノード値として取得し、/my.word/に一致するものを強調表示できなくなります。

4

2 に答える 2

3

私があなたを正しく理解しているなら、あなたはこれを変えたいと思っています：

<a id="searchword1" class="searchword" style="background-color: yellow; text-decoration: none; color: black;">my text</a>

これに：

my text

その場合は、非常に簡単です。

現状では、あなたが示した要素の子を求めているように見えます (要素には、テキスト ノード以外の子はありません。存在しない子を取得します)

 //1. Get element containing text

    var element = document.getElementById('searchWord1');


 //2. Get the text it contains

     var highlightedText = element.innerHTML;


//3. Get the highlighted element's parent

    var parent = element.parentNode;


//4. Create a text node:

    var newNode = document.createTextNode(highlightedText);


//5. Insert it into the document before the link

    parent.insertBefore(newNode, element);


//6. Remove the link element

   parent.removeChild(element);
于 2012-10-03T13:29:10.007 に答える
1

jQueryを使用している場合は簡単なDEMOになります

$('#searchword1').contents().unwrap();

ただし、これにjsのみを使用したい場合は、リンクにuser113716による解決策があります

デモ

var b= document.getElementsByClassName('searchword');

while(b.length) {
    var parent = b[ 0 ].parentNode;
    while( b[ 0 ].firstChild ) {
        parent.insertBefore(  b[ 0 ].firstChild, b[ 0 ] );
    }
     parent.removeChild( b[ 0 ] );
}
于 2012-10-03T13:38:27.460 に答える