如何在HTML文本區域中從用戶輸入文本並刪除HTML標記，還可以在文本區域中搜索單詞？

Question

我編寫了以下代碼，它可以獲取文本並刪除HTML標記，但我不知道或不知道編寫代碼來搜索用戶輸入文本輸入並顯示結果的單詞。 如何通過HTML和JavaScript做到這一點？

<html>
<head>
</head>

<body>
    <script type="text/javascript">

        function stripHTML(){
        var re= /<\S[^><]*>/g
        for (i=0; i<arguments.length; i++)
        arguments[i].value=arguments[i].value.replace(re, "")
        }
    </script>

<form>
    <textarea name="data1" style="width: 400px; height: 100px"></textarea><br />
    <input type="button" value="Remove HTML tags" onClick="stripHTML(this.form.data1)">
</form>

</body>
</html>

Answer 1

好的，這是一個完全重寫的答案，其中包含一些重大更改。

首先，我在您的Html中添加了一些內容，以便在剝離標簽后還有一個放置文本的地方，以及一個文本區域和用於搜索清理后的文本的按鈕：

<form>
    <textarea name="data1" style="width: 400px; height: 100px"></textarea><br />
    <input type="button" value="Remove HTML tags" onclick="stripHTML(this.form.data1)">
</form>
<hr>
<h3><b>Output (no HTML tags):</b></h3>
<p id="output"></p>
<hr>
<form>
    <textarea name="data2" id="search"></textarea></br>
    <input type="button" value="Search Output for Word" onclick="searchMe(this.form.data2)">
</form>
<hr>

接下來，我添加了以下javascript：

// used to remove empty strings from array:
Array.prototype.clean = function(deleteValue) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == deleteValue) {         
            this.splice(i, 1);
            i--;
        }
    }
    return this;
};

// Gets rid of the html tags in the first `textarea`.
stripHTML = function(text) {
    var re = /<\S[^><]*>/g;
    var newText = text.value.replace(re, "");
    showText(newText);
}

// Puts stripped text into "output" `p` tag.
showText = function(text) {
    var outputDiv = document.getElementById("output");
    outputDiv.innerHTML = text;
}

// Searches output text for word in `search` textarea.
searchMe = function(searchWord) {
    var text = document.getElementById("output").innerHTML;
    if(text) {
        // assuming your words will be split by spaces.
        var wordList = text.split(' ');
        wordList.clean('');
        if (wordList.length === 1) {
            alert('only one word!');
        } else {
            var message = '';
            for (var i = 0; i < wordList.length; i++) {
                if (wordList[i].toLowerCase() === searchWord.value.toLowerCase()) {
                    if (i === 0) {
                        message += [wordList[i],wordList[i+1]].join('-');
                    } else if (i === wordList.length-1) {
                        message += [wordList[i-1],wordList[i]].join('-');
                    } else {
                        message += [wordList[i-1],wordList[i],wordList[i+1]].join('-');
                    }
                    message += "---Word#:"+(i+1)+"\n";
                }
            }
            if (message) alert("Prev-This-Next:\n\n"+message);
            else alert ('No matches!');
        }
    } else {
        alert('press "Remove HTML tags" first!');
    }
}

希望這接近您想要的！

參考文獻：

Array.prototype.clean函數。

如何在HTML文本區域中從用戶輸入文本並刪除HTML標記，還可以在文本區域中搜索單詞？

問題描述

1 個解決方案

解決方案1
0 2014-01-13 18:43:11

如何在HTML文本區域中從用戶輸入文本並刪除HTML標記，還可以在文本區域中搜索單詞？

問題描述

1 個解決方案

解決方案1 0 2014-01-13 18:43:11

解決方案1
0 2014-01-13 18:43:11