Question

您好我无法替换突出显示的文本。我的示例代码中只有突出显示：

CSS：

.highlight
{
background-color:yellow;
}

JS：

function highlight(text)
{
   var inputText = document.getElementById("inputText");
    var innerHTML1 = inputText.innerHTML;
    var index = innerHTML1.indexOf(text);
    if ( index >= 0 )
    { 
        innerHTML1 = innerHTML1.substring(0,index) + "<span class='highlight'>" + innerHTML1.substring(index,index+text.length) + "</span>" + innerHTML1.substring(index + text.length);
        inputText.innerHTML = innerHTML1; 

    }

}

HTML：

<button onclick="highlight('fox')">Highlight</button>


<div id="inputText">
The fox went over the fence
</div>

让我知道替换突出显示文本的代码..

谷歌搜索时，我有一个链接..但它正在创建一个新节点。链接http://stackoverflow.com/questions/3997659/replace-selected-text-in-contenteditable-div?rq=1

Answer 1

如果您想突出显示和替换，您只需更新一行。

此代码段的第二行（为方便起见，换行符）是突出显示的文字。在原始代码段中，您使用与搜索匹配的文本相同的部分。用其他东西替换它，然后瞧瞧：

innerHTML1 = innerHTML1.substring(0, index)
             + "<span class='highlight'>" + "Fynn the fox" + "</span>" 
             + innerHTML1.substring(index + text.length);

匹配fiddle。

或者combination，看起来像这样：

innerHTML1 = innerHTML1.substring(0, index)
             + "<span class='highlight'> [Match: " + innerHTML1.substring(index, index + text.length)
             + "]</span>" + innerHTML1.substring(index + text.length);

替换突出显示的文本

1 个答案: