javascript - 文本字符串输出在第一个空格后停止，js/html

Question

我提前道歉，这是我发布的第一个 Stack Overflow 问题。我的任务是为我学区的技术帮助台创建一个新的符合 ADA 标准的网站。我从对 HTML 的最少知识开始，并一直通过 w3cschools 自学。所以这是我的考验:

我需要为我们所有的 pdf 和 html 指南创建一个页面。我正在尝试创建一个非常简单的有点可交互的菜单，它将从 onclick 事件填充一个链接数组，但是 title=""文本属性在第一个空格之后删除所有内容并且我尝试使用 replace() 没有成功方法，因为它来自数组而不是静态文本。

我知道我可能应该使用一个示例，但我的工作日即将结束，我想发布这篇文章，所以我只是复制了一些我的实际代码。

这就是发生的事情，在 var gmaildocAlt 的示例 1 中，工具提示将删除 Google 之后的所有内容，但会在示例 2 中正确显示整个字符串。我希望为其他帮助台人员创建一个表单输入，以添加链接而无需知道如何编码，但无法用

解决示例 1 的问题

var fix = gmaildocAlt.replace(//g, "&nb sp;")

//减去空格

//如果我将它设置在其他变量的下方，这也会破坏整个函数

我确信我做错了很多事情，但我真的很感激能在不需要替换方法的情况下使我的工具提示正确显示的最小提示。

//	GMAIL----------------------------
function gmailArray() {
  var gmaildocLink = ['link1', 'link2'];
  var gmaildocTitle = ["title1", "title2"];
  var gmaildocAlt = ["Google Cheat Sheet For Gmail", "Google 10-Minute Training For Gmail"];
  var gmailvidLink = [];
  var gmailvidTitle = [];
  var gmailvidAlt = [];
  if (document.getElementById("gmailList").innerHTML == "") {
    for (i = 0; i < gmaildocTitle.length; i++) {
      arrayGmail = "<a href=" + gmaildocLink[i] + " " + "title=" + gmaildocAlt[i] + ">" + gmaildocTitle[i] + "</a>" + "<br>";
      document.getElementById("gmailList").innerHTML += arrayGmail;
    }
    for (i = 0; i < gmailvidTitle.length; i++) {
      arrayGmail1 = "";
      document.getElementById("").innerHTML += arrayGmail1;
    }
  } else {
    document.getElementById("gmailList").innerHTML = "";
  }
}

<div class="fixed1">
  <p id="gmail" onclick="gmailArray()" class="gl">Gmail</p>
  <ul id="gmailList"></ul>
  <p id="calendar" onclick="calendarArray()" class="gl">Calendar</p>
  <ul id="calendarList"></ul>
</div>

Answer 1

手动使用字符串构建 HTML 可能会导致此类问题。最好一次一步构建它们，并让框架处理引号和特殊字符 - 如果您使用的是 jQuery，它可能是:

var $link = jQuery("<a></a>")
    .attr("href", gmaildocLink[i])
    .attr("title", gmaildocAlt[i])
    .html(gmaildocTitle[i]);
jQuery("#gmailList").append($link).append("<br>");

没有 jQuery，像这样:

var link = document.createElement("a");
link.setAttribute("href", gmaildocLink[i]);
link.setAttribute("title", gmaildocAlt[i]);
link.innerHTML = gmaildocTitle[i];
document.getElementById("gmailList").innerHTML += link.outerHTML + "<br>";

如果它对您的观众很重要，setAttribute 在 IE7 中不起作用，您必须访问作为元素属性的属性:link.href = "something";.