Angular JS新手求助：如何通过添加span标签高亮文本文件内容

Hey there! Since you're new to AngularJS and JavaScript, let's walk through how to add <span> tags to highlight content from your text file. I'll break this into simple, actionable steps so you can follow along easily.

First, create an HTML file with the core AngularJS setup. We'll need to include AngularJS and the ngSanitize module (to safely render HTML content later):

<!DOCTYPE html>
<html ng-app="TextHighlightApp">
<head>
    <title>Text Highlighter</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-sanitize.min.js"></script>
    <style>
        /* Style your highlighted text here */
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body ng-controller="TextHighlightController">
    <h2>Highlighted Text</h2>
    <div ng-bind-html="highlightedText"></div>
</body>
</html>

Next, add a script tag (either in the HTML file or a separate JS file) to define your AngularJS app and controller. We'll use AngularJS's $http service to fetch the text file, then add <span> tags around the content you want to highlight.

Let's say you want to highlight the phrase "Lorem Ipsum" as an example:

angular.module('TextHighlightApp', ['ngSanitize'])
.controller('TextHighlightController', ['$scope', '$http', function($scope, $http) {
    // Fetch the text file
    $http.get('your-text-file.txt')
        .then(function(response) {
            var originalText = response.data;
            
            // Define what you want to highlight
            var highlightKeyword = "Lorem Ipsum";
            // Use regex to wrap matches in <span> tags (case-insensitive, global match)
            var regex = new RegExp(highlightKeyword, 'gi');
            $scope.highlightedText = originalText.replace(regex, '<span class="highlight">$&</span>');
        })
        .catch(function(error) {
            console.error('Error loading text file:', error);
            $scope.highlightedText = 'Failed to load text content.';
        });
}]);

• File Path: Make sure your-text-file.txt is in the same directory as your HTML file, or update the path accordingly.
• Cross-Origin Issues: If you open the HTML file directly in a browser (using file:// protocol), you might get a CORS error. To fix this, run your files on a local web server (like XAMPP, WAMP, or using VS Code's Live Server extension).
• Customize Highlighting: Change highlightKeyword to any word/phrase you want to highlight. For multiple keywords, you can create an array and loop through it to apply replacements one by one.
• Styling: Adjust the .highlight CSS class to match your desired look (different background color, font style, etc.).

For your sample text, the highlighted version would render as:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

That's it! This should get you up and running with highlighting your text file content using AngularJS and JavaScript. Let me know if you run into any snags along the way.

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