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

Question

我的第一个 SO 问题！这是我想要做的：

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

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

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

用户选择后的Textarea：

    <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（使用 cmets）

如果你看到 JS Fiddle，你可以看到我在 textarea 之外的页面上放了另一个 p 元素，它更新得很好，但 textarea 里面的那个没有。我已经阅读了许多关于 SO 的其他类似问题，并且我开始认为我无法更改 textarea 标签之间的元素，我只能更改整个 textarea 本身。请引导我开悟！

Answer 1

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

这是一个演示此解决方案的 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 节点。

Answer 2

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

像这样的东西。 . .首先给<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 元素。 :)

编辑：修正了 .replace() 正则表达式中的错字。

Answer 3

我知道这个答案有点晚了，但这里是 =)

您可以完全按照您想要的方式进行操作。但为此，您需要实现一个小技巧。

拥有这个 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

来编辑 textarea 内容，作为 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());
    }
});

如你所见，我只是从 textarea 中获取信息，我创建了一个临时变量 span 来放置 textarea 的内容。然后将其作为 DOM 进行操作。

Answer 4

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

变化：

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

到：

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

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