AngularJS场景下如何检查字符串及选中内容是否包含span标签

Hey there! Let's tackle your two AngularJS requirements one by one—super straightforward once we break it down.

1. Check if a Given String Contains Span Tags #

If you just need to verify whether a raw string includes <span> (opening or closing) tags, a regex test works perfectly. It’s more robust than a simple includes() check because it accounts for span tags with attributes (like your highlight class). Here’s a reusable function:

// Reusable function to detect span tags in a string
function doesStringHaveSpan(str) {
  // Regex matches opening span tags (with optional attributes) or closing span tags
  const spanRegex = /<span[^>]*>|<\/span>/i;
  return spanRegex.test(str);
}

// Example usage with your highlighted text
const yourText = "Driven professional with broad technical skill-set, very strong attention to detail and over <span class='highlight'>8 years</span> experience in front-end web development";
console.log(doesStringHaveSpan(yourText)); // Logs true

2. Check if Right-Clicked Selected Text Contains Span Tags #

For the right-click selection scenario, we can’t rely solely on string checks—users might select partial content inside a span. Instead, we’ll use the browser’s Selection API to inspect the actual DOM nodes in the selected range.

Here’s how to implement this in your AngularJS controller:

angular.module('yourAppName', [])
.controller('YourController', ['$scope', function($scope) {
  // Target your text container (replace with your element's ID/class)
  const textContainer = angular.element(document.getElementById('highlighted-text'));

  // Bind right-click (contextmenu) event
  textContainer.on('contextmenu', function(e) {
    e.preventDefault(); // Block the default browser right-click menu
    
    const selection = window.getSelection();
    if (!selection.toString().trim()) return; // Exit if no text is selected

    // Check if the selected content includes any span elements
    const selectedRange = selection.getRangeAt(0);
    const selectedContent = selectedRange.cloneContents();
    const spanElements = selectedContent.querySelectorAll('span');

    // Optional: If you only care about spans with your 'highlight' class
    // const spanElements = selectedContent.querySelectorAll('span.highlight');

    if (spanElements.length > 0) {
      // Do something when span is detected (e.g., alert, custom menu)
      console.log("Selected content includes span tags!");
      alert("You've selected text that includes a highlighted span.");
    } else {
      console.log("No span tags in selected content.");
      alert("Selected text doesn't include any span tags.");
    }
  });
}]);

Quick Breakdown of the Logic: #

• window.getSelection() grabs the user’s selected text range.
• cloneContents() creates a copy of the selected DOM fragment, so we can safely query it without modifying the original content.
• querySelectorAll('span') finds any span elements in the selected fragment—this even catches cases where the user selects only part of a span’s text.

If you need to check if the entire selection lives inside a span (or your specific highlight class), you can adjust the logic to check the selection’s parent node:

// Check if the selection's parent is a span
const isInsideSpan = selection.anchorNode.parentElement.tagName === 'SPAN';
// Or check for the highlight class specifically
const isInsideHighlightSpan = selection.anchorNode.parentElement.classList.contains('highlight');

内容的提问来源于stack exchange，提问作者ganesh kaspate