高亮文本一个字一个字在一个句子上的按钮点击使用javascript

Highlight text word by word in a sentence on button click using javascript

本文关键字：一个 按钮 javascript 文本 高亮 句子      更新时间：2023-09-26

这是我到目前为止尝试过的代码，但它不工作

这里的

小提琴 

<button onclick="highlight('fox')">Highlight</button>
<div id="inputText">The fox went over the fence</div>
CSS

.highlight
{
  background-color:yellow;
}

JS 

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 
}
}

这就是我想出来的:)

http://jsfiddle.net/F5NUd/11/

$(document).ready(function () {
    var i = 0;
    $('.highlightButton').on('click', function (text) {
        $inputText = $('#inputText');
        words = $inputText.text().match(/'w+/g);
        if (i >= words.length) {
            i = 0;
        }
        words.splice(i, 0, "<span class='highlight'>");
        words.splice(i + 2, 0, "</span>");
        $inputText.html(words.join(' '));
        i += 1;
    });
});

UPDATE:自动换字:)

http://jsfiddle.net/F5NUd/15/

$(document).ready(function () {
    var i,
    timerId,
    speed = 100, //speed in ms
    higlightWord = function (text, index) {
        var words = text.match(/'w+/g);
        if (index >= words.length) {
            return text;
        }
        words.splice(index, 0, "<span class='highlight'>");
        words.splice(index + 2, 0, "</span>");
        return words.join(' ');
    };
    $('.highlightButton').bind('click', function () {
        $inputText = $('#inputText');
        i = 0;
        if (timerId) {
            clearInterval(timerId);
        }
        timerId = setInterval(function () {
            var sentence = higlightWord($inputText.text(), i);
            if (sentence !== $inputText.text()) {
                i += 1;
            } else {
                clearInterval(timerId);
            }
            $inputText.html(sentence);
        }, speed);
    });
});

试试这个。不过，它或许可以稍微清理一下。http://jsfiddle.net/F5NUd/9/

$('#clickme').click(function(){highlight('fox')});
function highlight(text)
{
    console.log($('#inputText').text());
    //inputText = document.getElementById("inputText")
    var innerHTML = $('#inputText').text();
    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').html(innerHTML);  
    }
}

它基本上可以工作，只是没有正确使用jsfiddle。

不需要添加

<script>
CSS和js周围的

标签。同样在左侧，你需要设置js"No wrap - in"http://jsfiddle.net/F5NUd/8/

你可以试试这个吗http://codepen.io/sumitguptainfo/pen/nuFGa

 <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' id='hightText'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
        inputText.innerHTML = innerHTML;
        Highlightedtext = document.getElementById("hightText");
        Highlightedtext.style.backgroundColor = 'yellow';
    }
}
</script>
相关文章：