使用Javascript创建通配符链接

Question

努力与JavaScript建立通配符链接，并且通常使用JavaScript来创建链接。希望将我的html链接存储在JavaScript中并将它们推送到html中，同时能够使它们成为动态链接。

基本上我有很多文档，我从SharePoint链接，以便更轻松地访问我的团队。我的老板希望他们是通配符链接，动态而不是静态链接，我真的很挣扎，因为它是JavaScript的相对noob。

这是我正在研究的HTML的一个例子。

<h2>Quality Management Key Documents</h2>
<div class="dropdown">
     <button onclick="myFunction1()" class="dropbtn">Corporate Manual Policies and User Manual</button>
      <div id="Corporate Manual Policies" class="dropdown-content">
**<!--This is the example/practice version-->**   <button onclick =  "link()" class="page-header">Works?</button>
          <a href="javascript:getURL()">Derpalot</a>
    </div>

这是我正在尝试使用的JavaScript代码。

var links = [];
links[0] = "link",
"Corporate Quality Manual"; //etc in terms of links

var link = document.createElement('link');
link.setAttribute(link);
link.innerHTML = desiredText;

function linkA() {
document.getElementsByTagName('link')[0].innerHTML += '<a href="'links[0]'">' + links[0] + '</a>';
};

Answer 1

您可以使用快捷方式属性innerHTML和anchor.href = url，而不是担心anchor.textContent = text和update()。

我创建了一个函数links，它将获取变量[href, text]中的所有信息并将其呈现在容器中。我想您可能想要自定义链接文本，因此我将数组放入links对的列表中。

每当您想要更改页面上的链接时，您都可以编辑update()数组，然后在完成后调用links.push(['https://new-link.com', 'New Link Text']) update() ，这会将所有更改推送到DOM

var links = [
  ['https://example.com', 'Example Text'],
  ['https://stackoverflow.com', 'StackOverflow']
]

function update () {
  var container = document.getElementById('corporate-manual-policies'),
      anchors = document.querySelectorAll('a'),
      length = anchors.length,
      i = 0
  // Re-use current anchors if possible, adjusting their `href` and `textContent`
  while (i < anchors.length) {
    anchors[i].href = links[i][0]
    anchors[i].textContent = links[i][1]
    i++
  }
  // Create new anchors if necessary
  i = length
  length = links.length
  while (i < length) {
    container.appendChild(
      anchor(links[i][0], links[i][1])
    )
    i++
  }
  
}

function anchor(href, text) {
  var a = document.createElement('a')
  a.href = href
  a.textContent = text
  return a
}

如果您希望我更详细地解释代码的任何特定部分，请告诉我。

<强>演示：

<h2>Quality Management Key Documents</h2>
<div class="dropdown">
  <button onclick="myFunction1()" class="dropbtn">Corporate Manual Policies and User Manual</button>
  <div id="corporate-manual-policies" class="dropdown-content">
    **
    <!--This is the example/practice version-->**
    <button onclick="update()" class="page-header">Update Links</button>
    <a href="javascript:getURL()">Derpalot</a>
  </div>
</div>

func GetheightOfLable(strLable:String , widthlable:CGFloat) -> CGFloat{

    let rectDetail:CGRect = strLable.boundingRect(with: CGSize(width: widthlable, height: CGFloat(MAXFLOAT)), options: NSStringDrawingOptions.usesLineFragmentOrigin, attributes: [NSFontAttributeName:UIFont.systemFontSize], context: nil)
    print(rectDetail.height)
    return rectDetail.height
}

Answer 2

我建议采用以下方法，请注意我已从各种元素（onclick属性）中删除了所有内联事件处理程序，并在DOM准备好后调用该函数运行，而不是要求用户单击<button>来调用该函数：

// defining a named function, to which an 'opts'
// Object can be passed:
// 'linkSelector'     : String, a CSS selector that can be used
//                      to select the appropriate elements;
// 'ancestorSelector' : String, a CSS selector that can be used
//                      to match the appropriate ancestor, from
//                      which the linkMap property can be retrieved
//                      which holds the details/properties of the
//                      <a> elements;
// 'linkMap'          : Object, with property-values matching the 'id'
//                      of the found ancestor elements, which holds
//                      the details ('text' and 'href') to be assigned
//                      to the <a> elements.
function enableLinks(opts) {

  // the default settings; these can each be overridden by
  // supplying an alternate value for the appropriate
  // property-name in the 'opts' Object:
  let settings = {

       // selects the appropriate elements to manipulate,
       // the default selector finds an <a> element which
       // is an adjacent-sibling of a <button> element
       // with a class of 'page-header':
      'linkSelector': 'button.page-header + a',

      // passed to Element.closest(), and matches the
      // appropriate ancestor - if any - from which
      // the 'id' property-value should be taken in
      // order to retrieve the details of the found <a>;
      // this selector matches a <div> element with an id
      // attribute with a class of 'dropdown-content':
      'ancestorSelector': 'div[id].dropdown-content',

    // an Object containing the relevant details, mapped
    // to the id of the ancestor:
    'linkMap': {

      // id of ancestor element:
      'CorporateManualPolicies': {

        // the 'href' for the link:
        'href': 'http://example.com/corporate/manual/policies',

        // the text-content, and title, of the link:
        'text': 'Link to Corporate Manual Policies.'
      },
      'stackoverflow': {
        'href': 'http://stackoverflow.com',
        'text': 'Link to Stack Overflow.'
      }
    }
  },

    // declared 'empty' variables for use in
    // later loops:
    ancestor,
    cache;

  // iterating over the keys of the 'opts' Object, 
  // or an Object literal (to avoid errors), using
  // Object.keys(), which retrieves the keys of the
  // supplied Object, and returns them as an Array
  // over which we iterate using
  // Array.prototype.forEach():
  Object.keys(opts || {}).forEach(

    // using an Arrow Function:
    // 'key' is a reference to the current 'key'
    // of the Array of keys over which we're iterating;
    // here we set the key of the same name in the
    // 'settings' Object to the property-value held
    // in the opts Object:
    key => settings[key] = opts[key]
  );

  // using Array.from() to convert the supplied Array-like
  // Object into an Array:
  let foundLinks = Array.from(

        // here we retrieve the non-live NodeList of
        // elements matching the supplied CSS selector
        // from the settings.linkSelector property-value:
        document.querySelectorAll(settings.linkSelector)
      )

  // iterating over that Array of elements, with
  // Array.prototype.filter(), in order to retain only
  // those elements for which the enclosed evaluation
  // returns as true or truthy:
    .filter(function(foundLink) {
      // 'foundLink' a reference to the current element
      // of the Array of elements over which we're iterating.

      // assigning the first - if any - ancestor element of
      // the current element which matches the supplied
      // CSS selector:
      ancestor = foundLink.closest(settings.ancestorSelector);

      // we retain the current element only if
      // 'ancestor' is truthy (not-null) and if the
      // settings.linkMap has a truthy (not-undefined)
      // property-value matching the 'id' property of
      // the ancestor element:
      return ancestor && settings.linkMap[ancestor.id];
    });

  // iterating over the foundLinks Array, using
  // Array.prototype.forEach():
  foundLinks.forEach(function(link) {
    // 'link' a reference to the current element in
    // the Array of elements over which we're iterating.

    // as before, finding the first ancestor matching
    // the matching CSS selector (except this time we
    // know there is an ancestor as that was one of the
    // criteria for retaining the elements in the
    // foundLinks Array):
    ancestor = link.closest(settings.ancestorSelector),

    // assigning the Object property-value of the
    // settings.linkMap Object stored in the property
    // of the ancestor's id; again: we know there is
    // a matching property-value as that was the other
    // criteria of retaining the element in the
    // foundLinks Array:
      cache = settings.linkMap[ ancestor.id ];

    // setting the href of the current 'link' element
    // to that held in the 'href' property-value of
    // the cache Object:
    link.href = cache.href;

    // this may be a little confusing, but assigns the
    // link.title property to be equal to the link.textContent
    // property which is itself set to the property-value
    // of the cache.text Object:
    link.title = link.textContent = cache.text;
  });

  // here we return the Array of foundLinks; in order that
  // chaining may take place on those found elements:
  return foundLinks;
}

// here we call the enableLinks function, with no arguments
// so we simply use the default arguments; and we then use
// Array.prototype.forEach() to iterate, again, over the
// the returned Array of elements from the function. Here
// we use an Arrow function to add the 'enabledLink' class-name
// to all <a> elements found within the function (if any):
enableLinks().forEach(el => el.classList.add('enabledLink'));

function enableLinks(opts) {
  let settings = {
      'linkSelector': 'button.page-header + a',
      'ancestorSelector': 'div[id].dropdown-content',
      'linkMap': {
        'CorporateManualPolicies': {
          'href': 'http://example.com/corporate/manual/policies',
          'text': 'Link to Corporate Manual Policies.'
        },
        'stackoverflow': {
          'href': 'http://stackoverflow.com',
          'text': 'Link to Stack Overflow.'
        }
      }
    },
    ancestor,
    cache;

  Object.keys(opts || {}).forEach(
    key => settings[key] = opts[key]
  );

  let foundLinks = Array.from(document.querySelectorAll(settings.linkSelector))
    .filter(function(foundLink) {
      ancestor = foundLink.closest(settings.ancestorSelector);
      return ancestor && settings.linkMap[ancestor.id];
    });

  foundLinks.forEach(function(link) {
    ancestor = link.closest(settings.ancestorSelector),
      cache = settings.linkMap[ancestor.id];

    link.href = cache.href;
    link.title = link.textContent = cache.text;
  });

  return foundLinks;
}

enableLinks().forEach(el => el.classList.add('enabledLink'));

.enabledLink {
  font-weight: bold;
  font-style: italic;
  text-decoration: none;
}

<h2>Quality Management Key Documents</h2>
<div class="dropdown">
  <button class="dropbtn">Corporate Manual Policies and User Manual</button>
  <div id="CorporateManualPolicies" class="dropdown-content">
    <button class="page-header">Works?</button>
    <a href="#">Derpalot</a>
  </div>
  <h2>External Resources</h2>
  <div class="dropdown">
    <button class="dropbtn">Corporate Manual Policies and User Manual</button>
    <div id="stackoverflow" class="dropdown-content">
      <button class="page-header">Works?</button>
      <a href="#">Derpalot</a>
    </div>

JS Fiddle demo

或者，或者，因为我们明确地使用祖先元素'id属性作为settings.linkMap对象的属性名称，我们可以使用与上面相同的HTML - 只需使用该对象即可找到合适的祖先并迭代这些：

// As above, a named function into which an opts Object
// can be passed:
// linkSelector : String, a CSS selector to identify the
//                relevant elements,
// linkMap      : Object, an Object containing the details
//                ('href' and 'text') of the links, stored
//                in properties named for the 'id' of the
//                ancestor elements.
function enableLinks(opts) {
  let settings = {

      // identifying an <a> element with a 'href' attribute
      // set to the value of '#':
      'linkSelector': 'a[href="#"]',
      'linkMap': {
        'CorporateManualPolicies': {
          'href': 'http://example.com/corporate/manual/policies',
          'text': 'Link to Corporate Manual Policies.'
        },
        'stackoverflow': {
          'href': 'http://stackoverflow.com',
          'text': 'Link to Stack Overflow.'
        }
      }
    },

    // declaring 'empty' variables for later use:
    ancestor,
    child,
    cache;

    // here we return the result of the following expression,
    // in which we iterate over the keys of the
    // 'settings.linkMap' Object:
    return Object.keys(settings.linkMap)

    // filtering the keys of that Object:
    .filter(

      // retaining only those keys that result in a
      // truthy value, in that if document.getElementById(key)
      // evaluates to null the key is discarded, if it retrieves
      // an element then it is retained:
      key => document.getElementById(key)

    // iterating over the Array of keys, using
    // Object.prototype.map(), which returns a new Array, usually
    // based on actions taken upon, or properties of, the supplied
    // Array:
    ).map(function(key) {
      // 'key' : a reference to the current key of the Array
      //         of keys over which we're iterating.

      // finding the ancestor using document.getElementById(key)
      // since the properties of the Object are the 'id' of
      // elements - and finding an element with that id was
      // the criteria for retaining any given key - this finds
      // the relevant ancestor element:
      ancestor = document.getElementById(key);

      // retrieving the relevant Object of details for the
      // given descendant element from the settings.linkMap
      // Object:
      cache = settings.linkMap[ key ];

      // finding the relevant descendant element, by passing
      // the settings.linkSelector CSS selector to the
      // the querySelector() method, which returns the first
      // element matching that selector, or null if no element
      // is found:
      child = ancestor.querySelector(settings.linkSelector);

      // if the value of the child variable is truthy (a
      // descendant element was found):
      if (child) {

        // the 'href' property of that element is set to
        // the property-value held in the cache.href property:
        child.href = cache.href;

        // the child.title and child.textContent properties
        // are both set to the property-value of the 
        // cache.text property:
        child.title = child.textContent = cache.text;

        // here we return the child variable to the created
        // Array; because this is enclosed within the
        // if (child) statement the Array.prototype.map()
        // method will return undefined if no child exists:
        return child;
      }

    // because the created Array will be composed of elements
    // and undefined, we use Array.prototype.filter() again
    // this time passing the Boolean constructor as an
    // argument; this function takes a value - here the
    // arguments are passed automatically from
    // Array.prototype.filter, and are the current-value
    // of the Array, the index of the current array-value and
    // a copy of the whole Array; Boolean takes the only the
    // first argument, and returns either true or false
    // depending on that argument. A true or truthy argument
    // results in true, and false or falsey arguments result
    // in false. The returned value of true/false retains
    // or discards the current Array value respectively:
    }).filter(Boolean);

}

// again, calling the function, using the default arguments, and
// iterating over the returned Array of elements to add the
// 'enabledLink' class-name to those found elements:
enableLinks().forEach( el => el.classList.add( 'enabledLink') );

    function enableLinks(opts) {
      let settings = {
          'linkSelector': 'a[href="#"]',
          'linkMap': {
            'CorporateManualPolicies': {
              'href': 'http://example.com/corporate/manual/policies',
              'text': 'Link to Corporate Manual Policies.'
            },
            'stackoverflow': {
              'href': 'http://stackoverflow.com',
              'text': 'Link to Stack Overflow.'
            }
          }
        },
        ancestor,
        child,
        cache;

      return Object.keys(settings.linkMap)
        .filter(
          key => document.getElementById(key)
        ).map(function(key) {
          ancestor = document.getElementById(key);
          cache = settings.linkMap[key];
          child = ancestor.querySelector(settings.linkSelector);

          if (child) {
            child.href = cache.href;
            child.title = child.textContent = cache.text;

            return child;
          }
        }).filter(Boolean);

    }

    enableLinks().forEach(el => el.classList.add('enabledLink'));

.enabledLink {
  font-weight: bold;
  font-style: italic;
  text-decoration: none;
}
.enabledLink:hover {
  text-decoration: underline;
}

<h2>Quality Management Key Documents</h2>
<div class="dropdown">
  <button class="dropbtn">Corporate Manual Policies and User Manual</button>
  <div id="CorporateManualPolicies" class="dropdown-content">
    <button class="page-header">Works?</button>
    <a href="#">Derpalot</a>
  </div>
  <h2>External Resources</h2>
  <div class="dropdown">
    <button class="dropbtn">Corporate Manual Policies and User Manual</button>
    <div id="stackoverflow" class="dropdown-content">
      <button class="page-header">Works?</button>
      <a href="#">Derpalot</a>
    </div>

JS Fiddle demo

参考文献：

• Array.from()。
• Array.prototype.filter()。
• Array.prototype.forEach()。
• Array.prototype.Map()。
• Arrow functions。
• Boolean constructor。
• document.getElementById()。
• document.querySelector()。
• document.querySelectorAll()。
• Element.classList API。
• Element.closest()。
• Element.querySelector()。
• let statement。
• Object.keys()。
• var statement。