Question

我有一个包含此内容的textarea

<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中的文字？

Answer 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中，因为它只是为纯文本设计的。

Answer 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中检索<img/> alt值和文本

2 个答案: