使用 jQuery 获取 DOM <script> 标签的文本答案

【问题标题】：Get the text of a DOM <script> tag with jQuery使用 jQuery 获取 DOM <script> 标签的文本
【发布时间】：2014-12-05 11:21:50
【问题描述】：

所以我有这段 html 代码：

<div id="widget-injection">
   <script id="metamorph-15-start" type="text/x-placeholder"></script>
   <div id="ember977" class="ember-view widget-content">
     ...
   </div>
   <script id="metamorph-15-end" type="text/x-placeholder"></script><script id="metamorph-10-end" type="text/x-placeholder"></script>

   ...(more widgets with the same structure as above)
</div>

在我的 div“widget-injection”中，我有多个小部件。我用这个遍历每一个以获得他们的html：

this.$(".widget-content").each(function(i){
   console.log($(this).prev()[0]);//It prints the correct string that I want "<script id="meta..."
   widgetsHtml.push($(this).prev()[0]+$(this).html()+$(this).next()[0]);                
 });

它在小部件内容中运行良好，但是，如果你注意到我得到了每个 prev() 和 next() 元素，它们是围绕每个小部件的 ember.js 符号脚本。那是不起作用的部分。我想将这些 prev() 和 next() 字符串附加到由 $(this).html() 产生的字符串（这是每个小部件内容的 HTML）。虽然，当我想要的只是对应的字符串时，我总是从我的 prev() 和 next() 元素中得到“[object HTMLScriptElement]”而不是"<script id="meta..."。所以我的问题是，如何将作为 DOM 脚本的元素转换为纯文本/字符串？

PS：如果我在小部件内容中有 <script id="meta...">，它最终会被正确转换为文本。

编辑：我忘了说我尝试了 html()、text()、val()、innerText、innerHTML 等其他所有方法，你可以命名它。我总是得到空字符串或未定义。

提前致谢

【问题讨论】：

标签： jquery dom

【解决方案1】：

就像你已经用 $(this) 做的一样。通过使用.html()

.prev[0] 获取 DOM 元素。

所以在你的情况下：

$(this).prev().html()+$(this).html()+$(this).next().html()

如果您不想要内容，但想要实际标签，则必须使用outerHTML：

$(this).prev()[0].outerHTML + $(this)[0].outerHTML + $(this).next()[0].outerHTML

【讨论】：

我忘了说我尝试了其他所有方法 html() text() val() 你给它命名。我总是得到空字符串或未定义。
@JoãoMartins 我不熟悉 ember.js。您的示例是实际的 html，还是 script 标签内的内容？因为现在它们是空的。
脚本里面什么都没有。这只是 ember 用来知道我猜的绑定元素在哪里的地方。所以，它只是
@JoãoMartins 哦，好的。我更新了我的答案。 .html() 只返回标签的内容，所以必须使用outerHTML

【解决方案2】：

如果你只想要脚本标签的纯文本： http://jsfiddle.net/ef93x2aq/

var script = documenet.getElementById('metamorph-15-start');
var text = script.innerText;
document.write(text);

【讨论】：

【解决方案3】：

$(".widget-content").each(function(i){
    console.log($(this).prev());//It prints the correct string that I want "<script id="meta..."
    // get div html
    var getthishtml = $(this).html();
    // empty this div html
    $(this).html();
    // move prev script inside div 
    $($(this).prev()).prependTo(widgetsHtml);
    // append div html
    $(this).append(getthishtml );
    // move next script inside div
    $($(this).next()).prependTo(widgetsHtml);   
});

DEMO你可以检查插入的元素来得到结果

【讨论】：

我忘了说我尝试了其他所有方法 html() text() val() 你给它命名。我总是得到空字符串或未定义。