Javascript 返回有效的iframe HTML代码

我有一段代码可以从HTML组件检测youtube链接。该函数工作并返回一个iframe，但问题是返回的iframe在一个引号“”内，我认为这取消了在页面上呈现iframe。代码如下：

    Template.statusBox.helpers({
  statuses: function(){
    return Status.find({}, {sort: {createdAt: -1}});
  },
  formattedDate: function(){
    var timecreated = this.createdAt;
    return moment(timecreated).fromNow();
  },
  author: function(){
    return this.author;
  },
  youtube: function(){
    var content = document.getElementsByClassName('hz-status-content');
    var innerContent = content[0].innerHTML;

    //regex to identify Youtube link in status
    const parts = (/(https?\:\/\/)?(www\.youtube\.com|youtu\.?be)\/([\w\=\?]+)/gm).exec(innerContent)
    let mediaContent = ''

    if (parts && parts[3]) {
      let id = parts[3]

      if (id.indexOf('v=') > -1) {
        const subParts = (/v=([\w]+)+/g).exec(id)

        if (subParts && subParts[1]) {
          id = subParts[1]
        }
      }

      mediaContent = `http://www.youtube.com/embed/${id}`
    }
    var hzYoutube =  '<iframe src="'+ mediaContent +'" type="text/html" frameborder="0"></iframe>'
    return hzYoutube;

  }
});

Template.statusBox.helpers({
状态：函数（）{
返回状态.find（{}，{sort:{createdAt:-1}}）；
},
formattedDate:函数（）{
var timecreated=this.createdAt；
返回时刻（timecreated）.fromNow（）；
},
作者：function（）{
返回此.author；
},
youtube:function（）{
var content=document.getElementsByClassName（'hz-status-content'）；
var innerContent=content[0]。innerHTML；
//regex将识别状态为的Youtube链接
const parts=（/（https？\：\/）？（www.youtube\.com | youtu\.be）\/（[\w\=\？]+）/gm）.exec（innerContent）
让mediaContent=“”
if（零件和零件[3]）{
设id=零件[3]
如果（id.indexOf（'v='）>-1）{
常量子部分=（/v=（[\w]+）+/g）.exec（id）
if（子部分和子部分[1]）{
id=子部分[1]
}
}
mediaContent=`http://www.youtube.com/embed/${id}`
}
var hzYoutube=“”
回流管；
}
});

。。。我在HTML代码中调用助手，如下所示：

<template name="statusBox">
  {{#each statuses}}
  <div class="hz-newsfeed small-12 columns">
    <div class="small-2 columns">
      <img src="/hand.gif">
    </div>
    <div class="hz-newsfeed-name small-10 columns">
      {{author}} <span class="hz-greyfont">posted a status</span><br/>
      <span class="hz-greyfont-smaller"><i class="fa fa-clock-o" aria-hidden="true"></i> {{formattedDate}}</span>
    </div>
    <hr/>
    <div class="row">
      <div class="small-12 columns">
        <p class="hz-status-content">{{{status}}}</p>
        {{#with FS.GetFile "images" images}}
          <div class="row text-center">
            <a href="{{this.url}}" data-lightbox="newsfeedimages" class="thumbnail">
              <img src="{{this.url store='thumb'}}" />
            </a>
          </div>
        {{/with}}
        {{youtube}}
      </div>
    </div>
    <div class="row comment-section">
        {{> commentsBox id=this._id}}
    </div>
  </div>
  {{/each}}
</template>

{{{#每个状态}
{{author}}发布了一个状态

{{formattedDate}}

{{{{status}}
{{#使用FS.GetFile“images”images}
{{/与}}
{{youtube}}
{{>commentsboxid=this.\u id}
{{/每个}}

…这将返回如下内容：

这是它在浏览器上的外观：

你能给我指一下正确的方向吗

---

已编辑：我已编辑了前面的代码，以便按照要求提供完整的代码。这是MeteorJs项目的一部分，我正在使用Blaze。

很抱歉给您添麻烦@charlietfl&@ThomasvanBroekhoven

这就是我找到的解决方案： 使用三个带花括号的把手{{{youtube}}}稳定地使用两个{{youtube}}将原始HTML返回页面

---

来源：

您没有展示如何使用此功能。提供一个可运行的。另外，发布实际代码而不是代码的图像问题最有可能出现在执行函数的部分，而不是函数本身。你能给我们看一下代码吗？@charlietfl不能提供一个可运行的示例，因为这是meteorjs项目的一部分。我编辑了上面的问题以提供完整的代码。@ThomasvanBroekhoven我用完整的代码编辑了问题。没问题，很高兴您找到了它！