Question

我是JavaScript新手。我的javascript代码存在问题。我正在尝试使用字符串替换方法来突出显示搜索到的文本。但它不起作用。我一定是犯了一些错误。或者我可能会采用错误的方法。请帮忙。这是我的代码：

<html><head>
<style>span.red { color:red; }</style>
<script language="javascript">
function highlightText(htext) {
    var str = document.getElementById(htext).value;
    //highlight the searched text
    str.replace(/([\w]+)/g, '<span class="red">$1</span>'); 
}
</script></head>

<body><span>Enter a word to search in the paragraph below:</span></br>
<input type="text" id="text-to-find" />
<button onClick="highlightText('text-to-find');">Find</button><hr/><hr/>
<p><b>Type any word from this paragraph in the box above, then click the "Find" button to highlight it red.</b></p></body></html>

Answer 1

当我查看您的代码时，我想到的第一件事是您正在尝试使用getElementById来获取@Joel猜到的文本部分。但后来，我意识到你用它来获取一个输入框的引用，该输入框包含要替换的文本。这是完全正确的。

但是，您似乎误解了正则表达式和string.replace方法的概念。

您似乎认为它是text_to_be_found.replace(some_regexp, substitute)。不正确。它是：haystack.replace(needle_which_can_be_regexp, substitute)并且字符串是不可变的，它在替换后返回新字符串。

您应该执行以下操作：

function highlightText(htext)
{
    var str = document.getElementById(htext).value;
    //highlight the searched text
    body.innerHTML = body.innerHTML.replace(str, '<span class="red">' + str + '</span>'); 
}

这里不需要正则表达式。您可以将body.innerHTML替换为element.innerHTML来收紧搜索域。

Answer 2

getElementById（）方法通过其id而不是指定的字符串值来查找项/元素。

以下是您的固定代码，它可以满足您的需求......如果您打算在现实生活中的项目/网站中使用它，您可能希望改进它。

<html><head>
<style>span.red { color:red; }</style>
<script language="javascript">
function highlightText(htext){
    var str = document.getElementById("sometext").innerHTML;
    str = str.replace(htext, '<span style="background-color:red;">' + htext + '</span>'); 
    document.getElementById("sometext").innerHTML = str;    
}
</script></head>

<body><span>Enter a word to search in the paragraph below:</span></br>
<input type="text" id="text-to-find" />
<button onClick="highlightText(document.getElementById('text-to-find').value);">Find</button><hr/><hr/>
<p id="sometext">
<b>Type any word from this paragraph in the box above, then click the "Find" button to highlight it red.</b></p></body></html>

或者，你总是可以使用this jQuery插件来完成这项工作。

使用getElementById突出显示页面上的文本字符串

2 个答案: