jQuery或Javascript可以更改文本区域中的元素

Can jQuery or Javascript change elements within textareas?

本文关键字：区域 文本 元素 Javascript jQuery      更新时间：2024-05-03

我的第一个SO问题！以下是我要做的：

我正在重写一个工具，它可以生成一些代码，用户可以直接粘贴到Craigslist和其他分类广告发布网站。我已经创建了一个网站列表（它们是用PHP从数据库中填充的），用户可以通过单选按钮进行选择，我希望他们的选择在文本区域中的一些<p></p>元素之间以纯文本（而不是链接）的形式填充。我使用的是jQuery。

用户选择之前的文本区域：

    <p id="thing"></p>

用户选择后的文本区域：

    <p id="thing">www.somewebsite.com</p>

HTML

<input type="radio" name="sitechoice" value="www.websiteone.com">www.websiteone.com<br />
<input type="radio" name="sitechoice" value="www.secondwebs.com">www.secondwebs.com
<textarea>
 Some stuff already in here
 Here is the website you chose:
 <p id="thing"></p>
 More stuff already here.
</textarea>

JS

$(document).ready(function () {
    $("input").change(function () {
        var website = $(this).val();
        alert(website);
        $("#thing2").html(website);
    });
});

JS Fiddle（带评论）

如果你看到JS Fiddle，你可以看到我在文本区域外的页面上放了另一个p元素，它更新得很好，但文本区域内的元素没有。我读过很多关于SO的类似问题，我开始认为我不能更改textarea标签之间的元素，我只能更改整个文本区域本身。请引导我走向启蒙！

通过将文本区域的内容转换为jQuery对象，您实际上可以非常容易地操作文本区域的文本内容，就像它是DOM的一部分一样。

下面是一个演示该解决方案的jsFiddle：http://jsfiddle.net/YxtH4/2/

输入更改事件内的相关代码：

// Your normal code
var website = $(this).val();
$("#thing2").html(website);
// This turns the textarea's val into a jQuery object ...
// And inserts it into an empty div that is created
var textareaHtml = $('<div>' + $("#textarea").val() + '</div>');
// Here you can do your normal selectors
textareaHtml.find("#thing").html(website);
// And this sets the textarea's content to the empty div's content
$("#textarea").val(textareaHtml.html());

包装HTML的空div是为了便于以后使用jQuery的.html()方法将其作为字符串检索，因此如果在文本区域内的p元素周围输入了额外的文本，则解析不会失败。

真正神奇的是$($("#textarea").val())，它获取文本区域的文本，并将其解析为jQuery对象中包含的HTML节点。

它不能按照您的想法进行操作（即，将它当作DOM元素进行操作），但它仍然可以作为文本区域的值访问，因此您可以这样检索它，使用基本的字符串操作来更改它，然后再次将更新的字符串设置为文本区域的新值。

像这样的。首先给<textarea>一个id值：

<textarea id="taTarget">
    Some stuff already in here
    Here is the website you chose:
    <p id="thing"></p>
    More stuff already here.
</textarea>

然后像这样修改你的脚本：

$(document).ready(function () {
    $("input").change(function () {
        var website = $(this).val();
        var currentTAVal = $("#taTarget").val();
        $("#taTarget").val(currentTAVal.replace(/(<p id="thing">)([^<]*)(<'/p>)/, "$1" + website  + "$3"));
    });
});

除非您需要<p>元素，否则您可能会考虑使用一个更简单的占位符，因为它实际上不会在文本区域中充当HTML元素。：）

EDIT:修复了.replace()正则表达式中的一个拼写错误。

我知道这个答案有点晚了，但现在是=）

你可以完全按照你想做的方式去做。但为此，你需要实施一个小技巧。

通过拥有这个HTML

<input type="radio" name="sitechoice" value="www.websiteone.com">www.websiteone.com
<br />
<input type="radio" name="sitechoice" value="www.secondwebs.com">www.secondwebs.com
<p id="thing2"></p>
<textarea id="textarea">
<p id="thing"></p>
</textarea>

通过实现类似函数changeInnerText的东西，可以将文本区域内容编辑为DOM

$(document).ready(function () {
    $("input").change(function () {
        var website = $(this).val(); // Gets value of input
        changeInnerText(website);
        //$("#thing").html(website); // Changes
        //$("#thing2").html(website); // Does not change
    });
    var changeInnerText = function(text) {
        var v = $("#textarea").val();
        var span = $("<span>");
        span.html(v);
        var obj = span.find("#thing")[0];
        $(obj).html(text);
        console.log(obj);        
        console.log(span.html());
        $("#textarea").val(span.html());
    }
});

正如你所看到的，我只是从文本区域获得信息，我创建了一个临时变量span来放置文本区域的内容。然后将其作为DOM进行操作。

不要尝试将文本插入<p>元素，而是将文本插入到<textarea>元素并包含<p>标记。像这样的东西应该可以做到：

更改：

$("#thing").html(website);

至：

$("textarea").html('<p id="thing">'+website+'</p>');

这是一把小提琴：http://jsfiddle.net/nR94s/

相关文章：