使用javascript在按鈕單擊上的句子中逐字突出顯示文本

Question

這是到目前為止我嘗試過的代碼，但是沒有用

在這里

HTML

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

}

Answer 1

嘗試這個。 它可能可能會被清理掉。 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);  
    }

}

Answer 2

它通常可以工作，您只是沒有以正確的方式使用jsfiddle。

無需添加

<script>

CSS和JS周圍的標簽。 另外，您還需要在左側設置js“無包裝-

http://jsfiddle.net/F5NUd/8/

Answer 3

您能嘗試一下嗎， 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>

Answer 4

這就是我想出的:)

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

更新：自動單詞切換:)

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