如何在 HTML textarea 中输入来自用户的文本并删除 HTML 标签并在 textarea 中搜索单词？答案

【问题标题】：How to input text from user in HTML textarea and remove the HTML tags and also search through the textarea for a word?如何在 HTML textarea 中输入来自用户的文本并删除 HTML 标签并在 textarea 中搜索单词？
【发布时间】：2014-01-13 17:57:01
【问题描述】：

我编写了以下代码，它可以获取文本并删除 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>

【问题讨论】：

不清楚您要做什么，您是否要查找用户何时/是否输入了指定的单词？
我认为他想取一个输入到 textarea 中的值，去掉任何 HTML，然后用新值更新 texatarea（但我也是不是 100%）。 . .
我试图从用户那里获取 HTML 代码，去掉 HTML 标签。然后用户可以请求或查找希望从新文本中搜索/查找的单词。我让它变得更好还是更糟？

标签： javascript html search find

【解决方案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 标签。然后用户可以请求或查找希望从新文本中搜索/查找的单词。我让它变得更好还是更糟？
您希望剥离后的文本以自己的div 显示吗？您希望用户如何进行搜索？通常可以使用浏览器的内置搜索功能在页面上查找文本。
是的，最好显示在自己的 div 中。我想在页面中包含搜索框来请求单词搜索，更好的是当显示结果时，不仅显示搜索的单词还显示上一个和下一个单词。
查看this solution。如果您认为它很好，我会将其发布为答案和回答问题
太棒了。我有一个问题，当标签被删除时，搜索输出只显示“只有一个词”警报。我必须在搜索部分工作，它也可以显示上一个和下一个单词。