求代码查收例句中与文本框相同的单词并改成红色显示

flayying 2020-01-08 08:37:39

做ANKI用的，
原代码是这样的：
function highlight(text)
{

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

}
highlight('{{单词1}}');

</script>
前面调用没问题，后面改个ID号再用这个不起作用，不知道问题出在哪里，求救，谢谢。

...全文

61 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2020-01-08

打赏
举报

引用 9 楼 flayying 的回复:

前一句正常，后面这个例句，怎么弄都没反应了，一样的代码

你是定义了两个highlight()函数吗？函数重名当然不行了。把id通过参数传给函数。用一个函数就可以。


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title></title>
<style type="text/css">
.highlight {
	color: red;
}
</style>
</head>
<body>
<div id="ff" >qweabcghj</div>
<div id="ee" >123456789</div>
<script>
function highlight(text,id)
{
	var inputText = document.getElementById(id);
    var innerHTML = inputText.innerHTML;
    var index = innerHTML.indexOf(text);
    if ( index >= 0 )
    { 
        innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
        inputText.innerHTML = innerHTML;
    }
}
highlight('abc',"ff");
highlight('567',"ee");
</script>

</body>
</html>

flayying 2020-01-08

打赏
举报

前一句正常，后面这个例句，怎么弄都没反应了，一样的代码

flayying 2020-01-08

打赏
举报

flayying 2020-01-08

打赏
举报

后面调的是另外一句，你写的这个填上去没反应

天际的海浪 2020-01-08

打赏
举报

引用 5 楼 flayying 的回复:

第1次用没问题，后面再调没反应了

再次调用时要先把上次添加的span标签删掉 var innerHTML = inputText.innerHTML.replace("<span class=\"highlight\">","").replace("</span>","");

flayying 2020-01-08

打赏
举报

第1次用没问题，后面再调没反应了

天际的海浪 2020-01-08

打赏
举报

正常啊


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title></title>
<style type="text/css">
.highlight {
	color: red;
}
</style>
</head>
<body>
<div id="ff" >qweabcghj</div>
<script>
function highlight(text)
{
	var inputText = document.getElementById("ff");
    var innerHTML = inputText.innerHTML;
    var index = innerHTML.indexOf(text);
    if ( index >= 0 )
    { 
        innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
        inputText.innerHTML = innerHTML;
    }
}
highlight('abc');
</script>
</body>
</html>

flayying 2020-01-08

打赏
举报

第一次这样调用没问题，后面一样的代码，不起作用了
<p id="inputText" class="sentence"><span class="quote"></span> {{句子}}<span class="quote"></span></p>

<script>

function highlight(text)
{

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

}
highlight('{{单词1}}');

</script>

flayying 2020-01-08

打赏
举报

<div id="ff" > {{例句1}}</div>

<script>

function highlight(text)
{

inputText = document.getElementById("ff")

var innerHTML = inputText.innerHTML
var index = innerHTML.indexOf(text);

if ( index >= 0 )
{
innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
inputText.innerHTML = innerHTML
}

}
highlight('{{word2}}')
</script>

天际的海浪 2020-01-08