在文本区域中检索 <img> alt 值和文本答案

【问题标题】：Retrieving <img> alt value and text in a textarea在文本区域中检索 <img> alt 值和文本
【发布时间】：2016-03-19 05:29:11
【问题描述】：

我有一个包含此内容的文本区域

<textarea id="testContent"> <img src="..." alt="value"> My text.... </textarea>

我知道我可以使用javascript来选择img标签的alt值，如图所示

<script>
    var $textfeldVal = document.getElementById("testContent");
    $img = $textfeldVal.getElementsByTagName("img")[0];
    alert("ALT VALUE: "+$img.alt);
</script>

有没有办法可以使用 javascript 来选择 alt 值 <img> 以及 textarea 中的文本？

【问题讨论】：

这又不是 angularjs。
这甚至不是有效的标记
你是什么意思@斯图尔特格兰特。这是一个代码 sn-p 也是一个代码挑战
好吧，我想它可以被认为是有效的。但实际上<textarea> 应该只保存纯文本。不是 DOM 节点
是的。此时，textarea 仅保留并将其视为文本我的文本....

标签： javascript

【解决方案1】：

好吧，如果必须的话，你可以像这样连接它们：

var $textarea = $("textarea#testContent"),
    textareaValue = $textarea.val(),
    // get alt value using regex, as jQuery can't find DOM nodes within a textarea
    altValueMatch = textareaValue.match(/\<img.*?alt=(\"|\')(.*?)\1.*?\>/),
    altValue = (Array.isArray(altValueMatch) && typeof altValueMatch[2] === "string")
        ? altValueMatch[2]
        : null;

// remove the img tag from textareaValue and trim any trailing whitespace
textareaValue = textareaValue.replace(/\<img.*?\>/, "").trim();

var concatenated = [altValue, textareaValue].join(" ");

你真的不应该将 DOM 节点放在 textarea 中，因为它只是为纯文本设计的。

【讨论】：

我只对作为文本值的 alt 值感兴趣，而在 textarea 中找到的所有内容都是文本。
如果你只想要 alt 值，只需使用上面的前四个变量，altValue 将包含你想要的（如果不存在 alt 属性，则为 null）。正如我所说，这是一种有点老套的方法。理想情况下，您永远不应该将 DOM 节点放在 textarea 中。
您进行了一系列更新。我选哪一个。请展示一个演示
@JnG 最近的一个（我刚刚添加了一个检查，以便如果不存在 alt 属性，变量将为空）。这个JSFiddle 显示它正在工作，它会在您运行它时提醒替代文本的值。
textarea 的 My Text... 的内容呢？我想要它和 alt 值。请更新输出。

【解决方案2】：

我不确定你是否可以在 textarea 中放置一个 img 标签... 为什么不简单：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>

        <div>
            <img id="imageDiv" src="..." alt="value">
            <div id="textDiv" contentEditable="true"> My text.... </div>
        </div>


        <script>
            var imageDiv = document.getElementById("imageDiv");
            var textDiv = document.getElementById("textDiv");
            alert("ALT VALUE: "+imageDiv.alt+"  "+textDiv.innerHTML);
        </script>

    </body>
</html>

编辑：回应@JnG 评论：那为什么不直接解析文本呢：

<textarea id="testContent"> <img src="..." alt="value"> My text.... </textarea>

<script>
    var text = document.getElementById("testContent").innerHTML;
    var tmp = text.split("alt=\"")[1];
    var value = tmp.split("\"")[0];
    var myText = tmp.split("\"&gt;")[1];
    alert(value+" "+myText);
</script>

JSFiddle： https://jsfiddle.net/rfhvfwbz/1/

【讨论】：

我没有在文本区域内放置标签。即使是常识也表明它们返回不同的值。但是，让我们假设我有一个具有这种结构的文本区域我的文本....
希望你现在得到？还是你没有？
抱歉，我现在知道了，好吧，我猜 ;-)。
给我看一个演示。谢谢
textarea 的 My Text 值怎么样。希望它与最终输出一起使用