JQuery：如何在textarea中的某些行添加一个类并显示修改后的textarea？答案

【问题标题】：JQuery: How to add a class to certain lines in textarea and display the modified textarea?JQuery：如何在textarea中的某些行添加一个类并显示修改后的textarea？
【发布时间】：2016-01-25 20:23:18
【问题描述】：

所以我想做的是：

-> 从 textarea 获取内容（用户输入）（输入变量）。

-> 用 \n 分割每一行并将它们存储在一个变量中（var lines）。

-> 使用 for 循环遍历所有行并将类 (.modify) 添加到不包含字符 [\u3400-\u9FBF] 的行。其他行保持不变。

-> 将所有行存储在一个新容器中（div class="new_text) 并显示它。

这是我目前所拥有的：

<!--DOCTYPE html-->
<html>
    <head>
        <style>
            textarea { 
              width: 650px; 
              min-width:650px; 
              max-width:650px; 
              height:650px; 
              min-height:650px;  
              max-height:650px;
            }
            .modify {
              color : red;
            }
        </style>
        <script>
            $(document).ready(function() { 
                $("#test").click(function(){
                    var i; 
                    var entered = $('#textInput').val();
                    var lines = entered.split('\n');
                    res = "";
                    for(i=0;i<lines.length;i++){
                        if (lines[i].match(/[\u3400-\u9FBF]/)) {
                            res = lines[i];
                            $(".new_text").append(res);
                        } else {
                            res = lines[i];
                            $(".new_text").append(res).addClass("modify");
                        }
                    }
                });
            });
        </script>
    </head>

    <body>
        <div class="container">
            <form role="form">
                <div class="userInput">
                    <label for="textInput">Input Here:</label>
                    <textarea class="form-control" rows="40" id="textInput"></textarea>
                </div>
                <button type="button" class="btn btn-Warning" id="test">Test</button>
            </form>
            <div class="new_text"></div>
        </div>
    </body>
</html>

然而，这并没有改变原始 textarea 输入的任何内容，知道有什么问题吗？或者这不是一种可以接受的方式来完成我想要做的事情？提前致谢！

【问题讨论】：

您将点击事件绑定到 id="test" 的元素。您的示例中不存在此类元素。
是的，抱歉，它是一个按钮，我忘记在此处添加它，将更改代码
正则表达式 [\u3400-\u9FBF] 代表什么？
我相信它们是中文/日文字符，我正在尝试保持这些字符相同
我添加了有关您的“一切都是红色”评论的详细信息。

标签： javascript jquery html css

【解决方案1】：

对于不包含所需条件的项目，您需要将文本包装在元素内以应用 css 类。

for(i=0;i<lines.length;i++){
            if (lines[i].match(/[\u3400-\u9FBF]/))
            {
              res = lines[i];
              $(".new_text").append(res);
            }
            else
            {
                res = lines[i];
                $('<p/>',{
                  text: res,
                  'class': 'modify'
              }).appendTo('.new_text');             
            }
          }

这是工作示例：https://jsfiddle.net/DinoMyte/6x80vabm/10/

【讨论】：

【解决方案2】：

同上第一个答案。您只能将类添加到正确的 HTML。

另外，在修改选择器中，您有color = red;。那是无效的CSS。应该是color: red;。

我注意到的另一个问题是没有带有id="test" 的按钮，因此没有任何东西会真正触发测试点击处理程序。

【讨论】：

谢谢，我已经更新了代码，但现在的问题是整个文本都是红色的，但我只想改变'else'语句中的行。

【解决方案3】：

所有文本变红的问题是因为您将“修改”类添加到“.new_text”而不是新元素。

您需要使用有效的 HTML 调用 append。一行文字是不够的。试试这个：

$(".new_text").append( $("<p>" + res + "</p>").addClass("modify") );

【讨论】：

这个答案是正确的，但是 - 如果你想在文本字段中将标记显示为文本，我几乎肯定你需要在附加之前转义任何选择器。否则它将被视为一个 DOM 元素并搞砸你的布局的其余部分。